<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!-- 1.准备好一个“容器” -->
<div id="test"></div>
<!-- 引入react核心库 -->
<script src="../js/react.development.js"></script>
<!-- 引入react-dom。用于支持react操作DOM -->
<script src="../js/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转为js -->
<script src="../js/babel.min.js"></script>
<script type="text/babel">
    /*
    生命周期的三个阶段（旧）
	1. 初始化阶段: 由ReactDOM.render()触发---初次渲染
        1.constructor()
        2.componentWillMount()
        3.render()
        4.componentDidMount() =====>常用
                一般在这个钩子中做一些初始化的事情，例如开启定时器、开启网络请求、订阅消息
	2. 更新阶段: 由组件内部this.setSate()或父组件重新render触发
        1.shouldComponentUpdate()
        2.componentWillUpdate()
        3.render()  =====>必须要用
        4.componentDidUpdate()
	3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发
        1.componentWillUnmount() =====>常用
                一般在这个钩子中做一些收尾的事情，例如：关闭定时器、取消订阅消息
    * */

    //创建组件
    class Count extends React.Component {
        //构造器
        constructor(props) {
            console.log("Count--constructor");
            super(props);
            //初始化状态
            this.state = {
                count: 0
            };
        }


        //加1按钮的回调
        add = () => {
            //获取原状态
            const {count} = this.state;
            //更新状态
            this.setState({count: count + 1});
        };

        //卸载组件按钮的回调
        death = () => {
            ReactDOM.unmountComponentAtNode(document.getElementById("test"));
        };
        //强制更新按钮的回调,不受阀门开关的影响
        force = () => {
            //
            this.forceUpdate();
        };

        //组件将要卸载的钩子
        componentWillUnmount() {
            console.log("Count---componentWillUnmount");
        }

        //组件将要挂载的钩子
        componentWillMount() {
            console.log("Count---componentWillMount");
        }

        //组件挂载完毕的钩子
        componentDidMount() {
            console.log("Count---componentDidMount");
        }

        //控制组件更新的阀门
        shouldComponentUpdate() {
            console.log("Count---shouldComponentUpdate");
            return true;
        }

        //组件将要更新的钩子
        componentWillUpdate() {
            console.log("Count---componentWillUpdate");
        }

        //组件更新完毕的钩子
        componentDidUpdate() {
            console.log("Count---componentDidUpdate");
        }

        render() {
            console.log("Count---render");
            const {count} = this.state;
            return (
                <div>
                    <h2>当前求和为:{this.state.count}</h2>
                    <button onClick={this.add}>点我+1</button>
                    <button onClick={this.death}>卸载组件</button>
                    <button onClick={this.force}>不更改任何状态中的数据，强制刷新</button>

                </div>
            );
        }
    }

    //父组件A
    class A extends React.Component {
        //初始化状态
        state = {carName: "奔驰"};
        changeCar = () => {
            this.setState({carName: "奥迪"});
        };

        render() {
            return (
                //父子组件
                <div>
                    <div>我是A组件</div>
                    <button onClick={this.changeCar}>换车</button>
                    <B carName={this.state.carName}/>
                </div>
            );
        }
    }

    //子组件B
    class B extends React.Component {
        componentDidMount() {
            console.log("B---componentDidMount");
        }

        //组件将要接受新的props的钩子
        componentWillReceiveProps(props) {
            console.log("B---componentWillReceiveProps", props);
        }

        //控制组件更新的阀门
        shouldComponentUpdate() {
            console.log("B---shouldComponentUpdate");
            return true;
        }

        //组件将要更新的钩子
        componentWillUpdate() {
            console.log("B---componentWillUpdate");
        }

        //组件更新完毕的钩子
        componentDidUpdate() {
            console.log("B---componentDidUpdate");
        }

        render() {
            console.log("B---render");
            return (
                <div>我是B组件，接受到的车是：{this.props.carName}</div>
            );
        }
    }

    //渲染组件
    ReactDOM.render(<Count/>, document.getElementById("test"));
</script>
</body>
</html>